<template>
  <div>
    <el-form
      :model="form"
      status-icon
      :rules="rules"
      ref="myform"
      label-width="100px"
      class="myform"
    >
      <el-form-item label="手机号" prop="mobile">
          <el-input type="text" v-model="form.mobile"></el-input>

      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="conpass">
        <el-input type="password" v-model="form.conpass"></el-input>
      </el-form-item>
       <!-- <el-form-item label="管理员" prop="roleid">
        <el-input type="radio" v-model="form.roleid"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="success" @click="subregister" >注册</el-button>
        <el-button type="primary" >重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import {regis} from "@/api"
export default {
    data(){
        return {
            form:{},
            rules:{
              mobile:[
                {required:true,message:'请输入手机号码',trigger:'blur'},
                {
                  validator:(rule,value,callback) =>{
                    var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/;
                    if(mobileReg.test(value)){
                      callback();
                    }else{
                      callback(new Error("请输入正确的手机号码"));
                    }
                  },
                  trigger:'change'
                }
              ],
              password:[
                {required:true,message:'请输入密码',trigger:'blur'},
                {
                  validator:(rule,value,callback)=>{
                    var passReg = /^[A-Za-z0-9]{4,12}$/;
                    if(value.length<4){
                      callback(new Error('密码长度至少4位'));
                    }else if(value.length>12){
                      callback(new Error('密码长度最多12位'));
                    }else if(!passReg.test(value)){
                      callback(new Error('密码格式不正确'));
                    }else{
                      callback();
                    }
                  },
                  trigger:'change'
                }
              ],
              username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
              ],
              conpass:[
                {required:true,message:'不能为空',trigger:'blur'},
              ]
            },
        }
    },
    methods:{
      subregister(){
        this.$refs.myform.validate(valid=>{
          if(valid){
            //如果用户输入格式正确，就判断密码是否相同
            if(this.form.password == this.form.conpass){
              regis(this.form)
              .then(res=>{
                if(res.type){
                  console.log(1111);
                 localStorage.setItem('mobile',this.form.mobile)
                 this.form = {}
                }
              })
              .catch(err=>{

              })
            }else{
              this.$message.error('密码不一致')
              return false
            }
          }else{
            this.$message.error('123215')
            return false;
          }
        })
      }
    },
    mounted(){}
}
</script>


<style lang="scss" scoped>
.myform {
  padding-right: 50px;
  padding-top: 20px;
}
</style>